Progresyviųjų žiniatinklio programėlių (PWA) giluminės nuorodos: programėlės būsenos atkūrimas pagal URL

Progresyviosios žiniatinklio programėlės (PWA) sukėlė revoliuciją žiniatinklio programėlių naudojimo patirtyje. Jos sujungia geriausias savųjų programėlių savybes su žiniatinklio prieinamumu, siūlydamos veikimą neprisijungus, tiesioginius pranešimus ir sklandžią vartotojo patirtį. Vienas iš esminių PWA vartotojo patirties gerinimo aspektų yra giluminių nuorodų įdiegimas su efektyviu būsenos atkūrimu.

Kas yra giluminės nuorodos?

Giluminė nuoroda – tai galimybė naudoti URL, norint nukreipti vartotojus į konkrečią vietą ar turinį mobiliojoje programėlėje ar PWA. Užuot tiesiog atidarius programėlės pagrindinį ekraną, giluminė nuoroda gali nukreipti vartotoją tiesiai į produkto puslapį, nustatymų ekraną ar bet kokį kitą konkretų turinio elementą. PWA kontekste giluminės nuorodos reiškia, kad URL ne tik paleis PWA, bet ir atkurs programėlės būseną, kad ji atitiktų vartotojo laukiamą kontekstą.

Kodėl giluminės nuorodos svarbios PWA?

Giluminės nuorodos yra esminės dėl kelių priežasčių:

• Pagerinta vartotojo patirtis: Vartotojai gali akimirksniu pasiekti konkretų turinį, nenaršydami per visą programėlę. Tai yra gyvybiškai svarbu šiandieniniame greitame skaitmeniniame pasaulyje, kur vartotojai tikisi momentinio pasitenkinimo.
• Pagerintas įsitraukimas: Giluminės nuorodos rinkodaros kampanijose, socialinių tinklų įrašuose ar el. pašto naujienlaiškiuose gali nukreipti vartotojus tiesiai į atitinkamą turinį PWA viduje, didinant įsitraukimą ir konversijas.
• Sklandus dalijimasis: Vartotojai gali lengvai dalytis konkrečiu turiniu PWA viduje su kitais, naudodami paprastą URL. Gavėjas gali tiesiogiai pasiekti tą patį turinį savo PWA egzemplioriuje.
• SEO nauda: PWA yra indeksuojamos paieškos sistemų, o giluminės nuorodos leidžia paieškos sistemoms nuskaityti ir indeksuoti konkretų turinį programėlėje, gerinant matomumą ir paieškos reitingus.
• Programėlės būsenos išsaugojimas: Tinkamai įdiegtos giluminės nuorodos gali išsaugoti programėlės būseną, užtikrinant, kad vartotojo patirtis išliktų nuosekli net po to, kai programėlė yra uždaroma ir vėl atidaroma per giluminę nuorodą. Tai yra svarbiausia sudėtingoms programėlėms ar darbo eigoms.

Programėlės būsenos ir jos atkūrimo supratimas

Programėlės būsena reiškia duomenis, kurie apibrėžia dabartinę jūsų PWA būseną. Tai gali apimti:

• Dabartinį rodomą puslapį ar vaizdą.
• Pirkinių krepšelio turinį.
• Vartotojo įvestį formoje.
• Slinkties poziciją puslapyje.
• Autentifikacijos statusą.

Programėlės būsenos atkūrimas reiškia, kad kai vartotojas atidaro PWA per giluminę nuorodą, programėlė grąžinama į tikslią būseną, kurioje ji buvo, kai nuoroda buvo sukurta. Tai yra būtina sklandžiai ir intuityviai vartotojo patirčiai. Įsivaizduokite vartotoją, pildantį ilgą formą; jei jie uždarytų programėlę ir vėl ją atidarytų be tinkamo būsenos atkūrimo, jiems tektų pradėti viską iš naujo. Giluminės nuorodos su programėlės būsenos atkūrimu išsprendžia šią problemą.

Kaip įdiegti PWA gilumines nuorodas su programėlės būsenos atkūrimu

Giluminių nuorodų įdiegimas su programėlės būsenos atkūrimu apima kelis etapus:

1. Apibrėžkite savo URL struktūrą

Gerai apibrėžta URL struktūra yra būtina efektyvioms giluminėms nuorodoms. Apsvarstykite, kaip jūsų programėlės turinys ir funkcionalumas susiejami su konkrečiais URL. Naudokite nuoseklią ir logišką struktūrą, kurią būtų lengva suprasti ir palaikyti.

Pavyzdys:

Apsvarstykite el. prekybos PWA. Jūsų URL struktūra galėtų atrodyti taip:

• / (Pagrindinis puslapis)
• /products (Visų produktų sąrašas)
• /products/<product-id> (Konkretus produkto puslapis, pvz., /products/123)
• /cart (Pirkinių krepšelis)
• /checkout (Atsiskaitymo procesas)
• /profile (Vartotojo profilis)

Sudėtingesniam būsenos valdymui galite naudoti užklausos parametrus:

• /products?category=electronics (Produktų sąrašas „elektronikos“ kategorijoje)
• /search?q=keyword (Paieškos rezultatai pagal „raktinį žodį“)

2. Apdorokite gaunamus URL

Jūsų PWA turi gebėti apdoroti gaunamus URL ir išgauti reikiamą informaciją programėlės būsenai atkurti. Paprastai tai apima JavaScript naudojimą URL analizei ir atitinkamą programėlės būsenos atnaujinimą. Pagrindinė vieta gaunamiems URL apdoroti yra jūsų PWA pagrindinėje programos logikoje arba maršrutizatoriuje.

Pavyzdys naudojant JavaScript:

            
function handleDeepLink() {
  const url = new URL(window.location.href);
  const path = url.pathname;

  switch (path) {
    case '/products':
      // Display the list of products
      displayProducts();
      break;
    case '/cart':
      // Display the shopping cart
      displayCart();
      break;
    default:
      if (path.startsWith('/products/')) {
        const productId = path.split('/').pop();
        // Display the details of the specified product
        displayProductDetails(productId);
      } else {
        // Display the home page
        displayHomePage();
      }
  }

  // Handle query parameters
  const category = url.searchParams.get('category');
  if (category) {
    // Filter products by category
    filterProductsByCategory(category);
  }

  const searchQuery = url.searchParams.get('q');
  if (searchQuery) {
    // Perform a search
    performSearch(searchQuery);
  }
}

// Call handleDeepLink when the app loads
handleDeepLink();

// Listen for changes in the URL (using the History API)
window.addEventListener('popstate', handleDeepLink);

            

              
                Copy
              
            
          

Šis pavyzdys parodo, kaip analizuoti URL ir atnaujinti programėlės būseną atsižvelgiant į kelią ir užklausos parametrus. Funkcija handleDeepLink iškviečiama, kai programėlė įkeliama ir kaskart pasikeitus URL (dėl naršymo programėlėje). Atkreipkite dėmesį į popstate įvykio klausytojo naudojimą. Tai yra būtina norint apdoroti naršyklės atgal/pirmyn mygtukų naršymą jūsų PWA viduje.

3. Saugokite ir atkurkite programėlės būseną

Norint efektyviai atkurti programėlės būseną, jums reikia mechanizmo reikiamiems duomenims saugoti ir juos gauti, kai programėlė vėl atidaroma per giluminę nuorodą. Tam galima naudoti kelis metodus, kiekvienas su savo privalumais ir trūkumais.

Vietinė saugykla (Local Storage)

Vietinė saugykla yra paprastas ir patogus būdas saugoti nedidelius duomenų kiekius vartotojo naršyklėje. Ji idealiai tinka saugoti tokius dalykus kaip vartotojo nuostatos, autentifikavimo žetonai ar nedidelio pirkinių krepšelio turinys. Tačiau vietinė saugykla turi ribotą talpą ir neturėtų būti naudojama dideliems ar jautriems duomenims.

Pavyzdys naudojant vietinę saugyklą:

            
// Store the current product ID
localStorage.setItem('currentProductId', productId);

// Restore the product ID
const currentProductId = localStorage.getItem('currentProductId');
if (currentProductId) {
  displayProductDetails(currentProductId);
}

            

              
                Copy
              
            
          

Sesijos saugykla (Session Storage)

Sesijos saugykla yra panaši į vietinę saugyklą, tačiau duomenys saugomi tik vartotojo sesijos metu. Kai vartotojas uždaro naršyklės skirtuką ar langą, duomenys automatiškai ištrinami. Sesijos saugykla tinka laikinų duomenų, kurių nereikia keliose sesijose, saugojimui.

Slapukai (Cookies)

Slapukai yra maži tekstiniai failai, saugomi vartotojo kompiuteryje. Jie dažnai naudojami vartotojų veiklai sekti ir nuostatoms saugoti. Tačiau slapukai turi keletą apribojimų, įskaitant mažą saugojimo talpą ir galimas privatumo problemas. Šiuolaikinės PWA dažnai renkasi naudoti vietinę saugyklą arba IndexedDB vietoj slapukų.

IndexedDB

IndexedDB yra galingesnis ir lankstesnis saugojimo sprendimas nei vietinė saugykla ar slapukai. Tai NoSQL duomenų bazė, leidžianti saugoti didelius struktūrizuotų duomenų kiekius vartotojo naršyklėje. IndexedDB idealiai tinka saugoti sudėtingą programėlės būseną, pavyzdžiui, didelio pirkinių krepšelio turinį, vartotojų profilius ar neprisijungus pasiekiamus duomenis.

Pavyzdys naudojant IndexedDB:

            
// Open a database
const request = indexedDB.open('myDatabase', 1);

request.onerror = function(event) {
  console.error('Error opening database:', event);
};

request.onsuccess = function(event) {
  const db = event.target.result;

  // Store the current product details
  const transaction = db.transaction(['products'], 'readwrite');
  const objectStore = transaction.objectStore('products');
  const addRequest = objectStore.put({ id: productId, name: productName, price: productPrice });

  addRequest.onsuccess = function(event) {
    console.log('Product added to database');
  };

  // Retrieve the product details
  const getRequest = objectStore.get(productId);

  getRequest.onsuccess = function(event) {
    const product = event.target.result;
    if (product) {
      displayProductDetails(product.id, product.name, product.price);
    }
  };
};

request.onupgradeneeded = function(event) {
  const db = event.target.result;
  const objectStore = db.createObjectStore('products', { keyPath: 'id' });
};

            

              
                Copy
              
            
          

Šis pavyzdys parodo, kaip atidaryti IndexedDB duomenų bazę, saugoti produkto detales ir jas vėliau gauti. Įvykis onupgradeneeded naudojamas objektų saugyklai sukurti, jei ji dar neegzistuoja.

Serviso darbuotojai ir podėliavimas (Service Workers and Caching)

Serviso darbuotojai gali perimti tinklo užklausas ir pateikti atsakymus iš podėlio, leidžiant jūsų PWA veikti neprisijungus ar esant ribotam ryšiui. Jie taip pat gali būti naudojami programėlės būsenai saugoti ir atkurti. Išsaugodami reikiamus duomenis podėlyje, galite užtikrinti, kad programėlė išliks funkcionali net tada, kai vartotojas yra neprisijungęs.

4. Apdorokite skirtingus scenarijus

Įdiegiant gilumines nuorodas su programėlės būsenos atkūrimu, svarbu tinkamai apdoroti skirtingus scenarijus:

• Programėlė neįdiegta: Jei vartotojas paspaudžia giluminę nuorodą, bet PWA nėra įdiegta, turėtumėte juos nukreipti į PWA diegimo puslapį (pvz., programėlių parduotuvę ar PWA pagrindinį puslapį su diegimo raginimu). Apsvarstykite galimybę naudoti atidėtąsias gilumines nuorodas (žr. toliau).
• Programėlė jau veikia: Jei PWA jau veikia fone, turėtumėte ją iškelti į priekį ir atkurti programėlės būseną. Tam gali prireikti naudoti clients.matchAll() metodą jūsų serviso darbuotojuje, kad rastumėte esamą PWA egzempliorių.
• Neteisinga arba pasenusi giluminė nuoroda: Jei giluminė nuoroda yra neteisinga arba pasenusi, turėtumėte parodyti vartotojui klaidos pranešimą ir nukreipti jį į atitinkamą puslapį PWA viduje (pvz., pagrindinį puslapį arba paieškos rezultatų puslapį).
• Leidimai: PWA dažnai reikalauja vartotojo leidimų (vietovės, kameros, pranešimų). Tinkamai tvarkykite leidimų prašymus ir paaiškinkite, kodėl jie yra būtini konkrečiai funkcijai, susijusiai su gilumine nuoroda.

Pažangios giluminių nuorodų technikos

Be pagrindų, štai keletas pažangių technikų, kaip pagerinti jūsų PWA giluminių nuorodų galimybes:

Atidėtosios giluminės nuorodos (Deferred Deep Linking)

Atidėtosios giluminės nuorodos leidžia sekti vartotojus, kurie paspaudžia giluminę nuorodą *prieš* įdiegdami PWA. Kai vartotojas įdiegia ir pirmą kartą atidaro PWA, galite gauti atidėtąją giluminę nuorodą ir nukreipti juos į numatytą turinį. Tai ypač naudinga rinkodaros kampanijoms.

Kaip tai veikia:

1. Vartotojas paspaudžia giluminę nuorodą (pvz., reklamoje).
2. Jei PWA neįdiegta, jie nukreipiami į programėlių parduotuvę arba PWA pagrindinį puslapį.
3. Sekimo tarnyba saugo giluminės nuorodos informaciją (pvz., slapuke arba vietinėje saugykloje).
4. Kai vartotojas įdiegia ir atidaro PWA, programėlė gauna išsaugotą giluminės nuorodos informaciją.
5. Programėlė nukreipia vartotoją į numatytą turinį.

Keletas trečiųjų šalių paslaugų siūlo atidėtųjų giluminių nuorodų sprendimus.

Žiniatinklio programėlės manifesto naudojimas

Žiniatinklio programėlės manifestas (manifest.json) pateikia informaciją apie jūsų PWA naršyklei, įskaitant pavadinimą, piktogramas ir pradžios URL. Galite naudoti start_url savybę manifeste, kad nurodytumėte URL, kuris turėtų būti atidarytas, kai PWA paleidžiama iš pagrindinio ekrano. Tai galima naudoti pagrindinei giluminių nuorodų funkcijai įdiegti.

Pavyzdys:

            
{
  "name": "My PWA",
  "short_name": "PWA",
  "start_url": "/products/123",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/icon.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

            

              
                Copy